<template>
  <div class="app-container">
    <div class="pass">
      <el-form  :model="Password" status-icon :rules="rules" ref="Password" label-width="100px" class="demo-ruleForm" >
        <el-form-item label="重置密码" prop="pass">
          <el-input type="password" v-model="Password.pass" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password"  v-model="Password.checkPass"  autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('Password')">
            提交
          </el-button>
          <el-button @click="resetForm('Password')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 重置密码弹出层 -->
  </div>
</template>

<script>
import { getPassUser, updatePass } from '@/api/mdlist'

export default {
  name: 'cbd-pass',
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.Password.checkPass !== '') {
            this.$refs.Password.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.Password.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        Password: {
          pass: '',
          checkPass: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      };
  },
  created() {
    // this.getUserPass()
  },
  methods: {
    getUserPass() {
      getPassUser().then((res) => {
        console.log(res)
      })
    },
    submitForm(Password) {
        this.$refs[Password].validate((valid) => {
          if (valid) {
             updatePass({Password:this.Password.pass}).then((res)=> {
             if (res.msg === 'success') {
               alert('您的密码修改成功！')  
             }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(Password) {
        this.$refs[Password].resetFields();
      }
  },
}
</script>
<style scoped>
.pass {
  width: 300px;
  padding: 20px;
}
</style>
